
<template>
  <a-row :gutter="24">
    <a-col :span="8">
      <BhForm ref="formRef"  v-model:model-value="formData"  :options="options" :columns="formColumns"/>
    </a-col>
    <a-col :span="16">

    </a-col>
    <a-col :span="24">
      <BhTable
          v-if="formData.is_show===1"
          row-key="column_name"
          :data="listData"
          :columns="columns"
          :loading="loading"
          :scroll="{ x: '100%', y: 800, minWidth: 900 }"
          :pagination="false"
          :draggable="{ type: 'handle', width: 40 }"
          :disabled-tools="['setting', 'refresh','fullscreen','medium']"
          :disabled-column-keys="['column_name']"
          @change="handleChangeSort"
      >
        <template #column_name="{ record }">
          {{record.column_name}}
        </template>
        <template #column_comment="{ record }">
          {{record.column_comment}}
        </template>
        <template #data_type="{ record }">
          {{record.data_type}}
        </template>
        <template #column_default="{ record }">
          {{record.column_default}}
        </template>
        <template #is_required="{ record }">
          <a-checkbox v-model="record.is_required" value="true"/>
        </template>
        <template #show_add="{ record }">
          <a-checkbox v-model="record.show_add" value="true"/>
        </template>
        <template #show_edit="{ record }">
          <a-checkbox v-model="record.show_edit" value="true"/>
        </template>
        <template #title="{ record }">
          <a-input v-model="record.title" />
        </template>
        <template #form_component="{ record }">
          <BhSelector
              v-model="record.form_component"
              :placeholder="'请选择表单类型'"
              :source="toOptions('form_type_enum')"
              :option-value="'value'"
              :option-label="'label'"
          ></BhSelector>

        </template>
        <template #dict_code="{ record }">
          <BhSelector
              v-model="record.dict_code"
              :placeholder="'请选择字典类型'"
              :source="dictList"
              :option-value="'code'"
              :option-label="'name'"
          ></BhSelector>
        </template>
      </BhTable>
    </a-col>
  </a-row>
</template>


<script setup lang="ts">
import {type Columns, type Options,BhForm} from '@/components/BhForm'
import {type FieldEditConfigFormResp, type FieldEditConfigListResp} from "@/api/system/code";
import {TableInstanceColumns} from "@/components/BhTable";
import {useLoading} from "@/hooks/modules/useLoading";
import {useDictStore} from "@/store";
import {type DictResp} from "@/api/system/dict";
const {loading, setLoading} = useLoading();
const {toOptions} = useDictStore();
const formRef = ref<InstanceType<typeof BhForm>>()
const options: Options = {
  form: {size: 'large'},
  btns: {hide: true},
}
const props = withDefaults(
    defineProps<
        Partial<{
          form: FieldEditConfigFormResp;
          list: FieldEditConfigListResp[];
          dictList: DictResp[]
        }>
    >(),
    {
    }
);

const emits = defineEmits(['update:form','update:list']);
let formData = computed({
  get() {
    return props.form;
  },
  set(e) {
    emits('update:form', e);
  },
});
let listData = computed({
  get() {
    return props.list
  },
  set(e) {
    emits('update:list', e);
  },
});


const formColumns: Columns = reactive([
  {
    label: '是否展示',
    field: 'is_show',
    type: 'radio-group',
    options: [
      { label: '显示', value: 1 },
      { label: '不展示', value: 2 },
    ],
    props:{
      type:'button'
    },
    rules: [{ required: true, message: '请选择表单状态' }],
  },
  {
    label: '打开方式',
    field: 'open_type',
    type: 'radio-group',
    hide:(form)=>{
      return form.is_show === 2
    },
    options: [
      { label: '弹窗', value: 'modal' },
      { label: '抽屉', value: 'drawer' },
    ],
    props:{
      type:'button',
    },
    rules: [{ required: true, message: '请选择表单打开方式' }],
  },
  {
    label: '页面宽度',
    field: 'open_width',
    type: 'input-number',
    hide:(form)=>{
      return form.is_show === 2
    },
    rules: [{ required: true, message: '请输入页面宽度' }],
  },
  {
    label: '每行数量',
    field: 'rows_num',
    type: 'input-number',
    hide:(form)=>{
      return form.is_show === 2
    },
    rules: [{ required: true, message: '请输入每行数量' }],
  },

])

const columns: TableInstanceColumns[] = [
  {title: '字段名称', slotName: 'column_name',width: 150, align: 'center'},
  {title: '字段描述', slotName: 'column_comment', width: 150, align: 'center'},
  {title: '字段类型', slotName: 'data_type', width: 100, align: 'center'},
  {title: '默认值', slotName: 'column_default', width: 150, align: 'center'},
  {title: '必填', slotName: 'is_required', width: 60, align: 'center'},
  {title: '新增', slotName: 'show_add', width: 60, align: 'center'},
  {title: '编辑', slotName: 'show_edit', width: 60, align: 'center'},
  {title: '字段名词', slotName: 'title', width: 150, align: 'center'},
  {title: '前端组件', slotName: 'form_component',  align: 'center'},
  {title: '关联字典', slotName: 'dict_code',align: 'center'},
]
const handleChangeSort = (newDataList: FieldEditConfigListResp[]) => {
  let sort=0;
  newDataList.map((s) => s.sort=++ sort)
  listData.value =newDataList
}
//字段检查
const onValidate =  async() => {
  const  error=ref('');
  const  isTrue= await formRef.value?.formRef?.validate();
   if(isTrue){
       return  isTrue
    }
  for (let s of listData.value) {
    if(s.form_component === '' && (s.show_add ==true || s.show_edit ==true ) && formData.value.is_show ===1){
      error.value=  s.column_name+'表单组件不能为空'
      break;
    }
  }
  return error.value
}

defineExpose({onValidate})
</script>

<style scoped lang="less">

</style>